<script>
import {api} from "@/assets/static/js/settings";

export default {
  name: "ApprovalView",
  data() {
    return {
      // 删除按钮状态
      delBtlStatu: true,
      userList: [],
      tableData: [],
      // 搜索参数
      search: '',
      // 总条数
      total: 0,
      // 搜索的size
      size: 10,
      // 页码
      page: 1,
      // 排序
      ordering: '',
    }
  },
  methods: {
    editHandle(id, res) {
      this.$axios.put(api.approval + id + '/', {state: res}).then(res => {
        if (res) {
          this.getApprovalList()
        }
      })
    },
    // 获取数据
    getApprovalList() {
      this.$axios.get(api.approval, {
        params: {
          search: this.search,
          page: this.page,
          size: this.size,
          ordering: this.ordering,
        },
      }).then(res => {
        if (res) {
          this.tableData = res.results.results
          this.total = res.results.count
        }
      })
    },
    // 处理多选数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.delBtlStatu = val.length === 0
    },
    // 分页器选择分页大小
    handleSizeChange(val) {
      this.size = val
      this.getApprovalList()
    },
    // 分页器选择页码
    handleCurrentChange(val) {
      this.page = val
      this.getApprovalList()
    },
    handleTableSort(event) {
      // ascending 升序 descending 降序
      let order = event.order === 'ascending' ? '' : '-'
      this.ordering = order + event.prop
      this.getApprovalList()
    },
    // 批量删除
    delHandle(id) {
      let ids = []
      if (id) {
        ids.push(id)
      } else {
        this.multipleSelection.forEach(row => {
          ids.push(row.id)
        })
      }
      this.$axios.post(api.approval_batch_del, {ids: ids}).then(res => {
        if (res) {
          this.$message({
            showClose: true,
            message: '恭喜你，操作成功',
            type: 'success',
            onClose: () => {
              this.getApprovalList()
            }
          });
        }
      })
    },
  },
  created() {
    this.getApprovalList()
  }
}
</script>

<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-input
            v-model="search"
            placeholder="搜索"
            clearable>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="getApprovalList">搜索</el-button>
      </el-form-item>

      <el-form-item>
        <el-popconfirm title="确定批量删除吗？" @confirm="delHandle(null)">
          <template v-slot:reference>
            <el-button type="danger" :disabled="delBtlStatu" v-if="hasAuth('approval:delete')">批量删除
            </el-button>
          </template>
        </el-popconfirm>
      </el-form-item>
    </el-form>
    <el-table
        fixed="left"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        border
        stripe
        @selection-change="handleSelectionChange"
        @sort-change="handleTableSort">
      <el-table-column
          type="selection"
          width="40">
      </el-table-column>
      <el-table-column
          prop="applicant.username"
          label="申请人"
          sortable
          width="150">
      </el-table-column>
      <el-table-column
          prop="get_category"
          label="申请类型"
          width="120"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="get_state"
          label="申请状态"
          width="150">
        <template v-slot:default="scope">
          <el-tag size="small" v-if="scope.row.state === 1" type="success">{{ scope.row.get_state }}</el-tag>
          <el-tag size="small" v-else-if="scope.row.state === 0" type="warning">{{ scope.row.get_state }}</el-tag>
          <el-tag size="small" v-else type="danger">{{ scope.row.get_state }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="content"
          label="请求说明"
          width="120"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          sortable="custom"
          prop="create_time"
          width="200"
          label="创建时间"
          show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
          fixed="right"
          prop="icon"
          width="250"
          label="操作">
        <template v-slot:default="scope">
          <el-button type="text" @click.once="editHandle(scope.row.id,1)" v-if="hasAuth('approval:agree')">同意申请
          </el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button type="text" @click.once="editHandle(scope.row.id,2)" v-if="hasAuth('approval:refuse')">拒绝申请
          </el-button>
          <el-divider direction="vertical"></el-divider>
          <template>
            <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delHandle(scope.row.id)"
                           v-if="hasAuth('approval:delete')">
              <template v-slot:reference>
                <el-button type="text">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 50, 100]"
        :current-page="page"
        :page-size="size"
        :total="total">
    </el-pagination>
  </div>
</template>

<style scoped>

</style>